<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>h5web存储</title>
</head>

<body>
    <script>
        // localStorage - 没有时间限制的数据存储
        // sessionStorage - 针对一个 session 的数据存储

        // Store
        localStorage.setItem("lastname", "Gates");
        localStorage.lastname = 'Gates';

        // get
        localStorage.getItem("lastname");
        localStorage.lastname;

        // delete
        localStorage.removeItem('lastname');
    </script>

    <script>
        function clickCounter() {
            var oResult = document.getElementById('result');
            if (typeof(localStorage) !== 'undefined') {
                if (localStorage.clickCount) {
                    localStorage.clickCount = Number(localStorage.clickCount) + 1;
                    // 名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

                } else {
                    localStorage.clickCount = 1;
                }

                oResult.innerHTML = '你点击的次数为：' + localStorage.clickCount;

            } else {
                oResult.innerHTML = "你的浏览器不支持localStorage";
            }

        }
    </script>
    </head>

    <body>
        <p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
        <div id="result"></div>
        <p>请点击按钮使计数器递增。</p>
        <p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>

    </body>

</html>